import styled from "styled-components";
function Header({ className }) {
	return (
		<div className={className}>
			<div>
				<a href="#" target="_blank">
					<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/foot-1.png"} />
				</a>
				<a href="#" target="_blank">
					<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/foot-2.png"} />
				</a>
				<a href="#" target="_blank">
					<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/foot-3.svg"} />
				</a>
				<a href="#" target="_blank">
					<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/foot-4.svg"} />
				</a>
				<a href="#" target="_blank">
					<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/foot-5.svg"} />
				</a>
				<a href="#" target="_blank">
					<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/foot-6.svg"} />
				</a>
				<a href="#" target="_blank">
					<img width={20} height={20} src={process.env.PUBLIC_URL + "/img/foot-7.svg"} />
				</a>
			</div>
			<span>Substats © 2023</span>
		</div>
	);
}

export default styled(Header)`
	display: flex;
	width: 100%;
	height: 110px;
	background-color: rgba(40, 46, 57, 1);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	div {
		height: 60px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		a {
			width: 30px;
			img {
				width: 20px;
				height: 20px;
			}
		}
	}
	span {
		width: 100%;
		display: block;
		overflow: hidden;
		text-align: center;
		color: #fff;
		font-size: 13px;
	}
`;
